<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      一次传递多个prop到组件，可以使用 v-bind="对象" 这种语法
        userInfo: {
          name: '',
          age: ''
        }

        <组件 v-bind="userInfo" />   
        ||
        <组件 :name="userInfo.name" :age="userInfo.age" />   
   -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <hello :name="zhangsan.name" :age="zhangsan.age" :carBrand="zhangsan.carBrand" :work="zhangsan.work"></hello>

          <hello v-bind="lisi"></hello>
        `,

        data() {
          return {
            zhangsan: {
              name: "张三",
              age: 18,
              carBrand: "大众",
              work: "程序员",
            },

            lisi: {
              name: "里斯",
              age: 20,
              grader: 2,
              marry: true,
              carBrand: "宝马",
              work: "架构师",
            },
          };
        },
      });

      app.component("hello", {
        template: `
          <div>
            <h2>欢迎</h2>
            <p>姓名：{{ name }}</p>   
            <p>年龄：{{ age }}</p>  
            <p>性别：{{ grader }}</p> 
            <p>爱好：{{ likes }}</p>
            <p>婚否：{{ marry ? '是' : '否' }}</p>
            <p>车的品牌: {{ carBrand }}</p>
          </div>
        `,
        props: {
          name: String, // name 需要传递 字符串类型
          age: Number, // age 需要传递 数值类型
          grader: {
            type: Number, // grader 需要传递的类型是 Number
            default: 1, // 当没有传递的时候使用的默认值
          },
          likes: {
            type: Array,
            // 当默认值为引用数据类型时，需要通过一个函数来返回
            // default: ["唱", "跳", "Rap"],
            default() {
              return ["唱", "跳", "Rap"];
            },
          },
          marry: {
            // Boolean 的类型数据，默认值是 false
            //    传递 Boolean 类型值时，只需要写了就表示传递了 true
            type: Boolean,
          },
          carBrand: {
            type: String,
            required: true, // 表示该 prop 必须传递
          },
          // 自定义校验
          work: {
            validator(value) {
              // value 是该prop具体传递的值
              // 该方法需要有返回值，返回true 表示校验通过，返回false，表示校验失败
              // 必须是前端相关的。
              return value.includes("前端");
            },
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
